<template>
  <div>

    <p>toRef 是将某个对象中的某个值转化为响应式数据，其接收两个参数，第一个参数为 obj 对象；第二个参数为对象中的属性名</p>
    <p>toRefs其作用就是将传入的对象里所有的属性的值都转化为响应式数据对象，该函数支持一个参数，即 obj 对象</p>
    <p>ref 是对传入数据的拷贝；toRef 是对传入数据的引用</p>
    <p>ref 的值改变会更新视图；toRef 的值改变不会更新视图</p>


    <p>reactive 方法是用来创建一个响应式的数据对象 <strong>改变原始数据 obj 的值reactive 的值也会跟着改变，但是视图不会更新</strong></p>
    <p>shallowReactive浅层的 reactive</p>
    <p>reactive将 obj 作为参数传递给 reactive 生成响应式数据对象时，若 obj 的层级不止一层，那么会将每一层都用 Proxy 包装一次</p>
    <p>这是一个浅层的 ref，与 shallowReactive 一样是拿来做性能优化的,shallowReactive 是监听对象第一层的数据变化用于驱动视图更新，那么 shallowRef 则是监听 .value 的值的变化来更新视图的</p>

    <p>toRaw 方法是用于获取 ref 或 reactive 对象的原始数据的</p>

    <p>markRaw 方法可以将原始数据标记为非响应式的，即使用 ref 或 reactive 将其包装，仍无法实现数据响应式，其接收一个参数，即原始数据，并返回被标记后的数据</p>
  </div>
  <p>{{ state1 }}</p>
  <button @click="add1">增加</button>

  <p>{{ state2 }}</p>
  <button @click="add2">增加</button>

  <p>{{state5.age}}</p>
  <button @click="change">改变</button>

</template>

<script>
  import {ref, toRef,toRefs,reactive,toRaw,markRaw} from 'vue';

  export default {
    name: "roTef",
    setup() {
      const obj = {count: 3}
      const obj1 = {
        name:'ccc',
        age:24,
      }
      const state1 = ref(obj.count)
      const state2 = toRef(obj, 'count')
      const state3 = toRefs(obj1);
      console.log(state3);

      const state4 = reactive(obj)
      const raw = toRaw(state4)
      console.log(obj === raw);


      function add1() {
        state1.value ++
        console.log('原始值：', obj);
        console.log('响应式数据对象：', state1);
      }

      function add2() {
        state2.value ++
        console.log('原始值：', obj);
        console.log('响应式数据对象：', state2);
      }

      const markRaw = markRaw(obj)
      // 试图用reactive包装raw, 使其变成响应式数据
      const state5 = reactive(markRaw)

      function change() {
        state5.age = 99;
        console.log(state5);
      }


      return {state1, state2, add1, add2,state5,change}
    }
  }
</script>

<style>

</style>